<template>
    <div class="comEditor" ref="comEditor"></div>
</template>

<script>
    import E from 'wangeditor'
    import customConfig from './data'
    import { fileUpload } from '@/api/article'

    export default {
        name: "comEditor",
        props:{
            configType:{
                type: String,
                required:false
            }
        },
        data() {
            return {
                editor: null
            }
        },
        mounted(){
           this.initEditor()
        },
        methods: {
            initEditor(){
                this.editor = new E(this.$refs.comEditor)
                let editorCustomConfig = customConfig(this.configType)
                editorCustomConfig.customUploadImg = this.customUploadImg
                this.editor.customConfig = editorCustomConfig
                this.editor.create()
            },
            // 图片上传
            customUploadImg(files, insert){
                if(this.configType === 'reply')return false

                let file = files[0]
                fileUpload(file)
                    .then(res=>{
                        if(Number(res.code)===0){
                            // 上传代码返回结果之后，将图片插入到编辑器中
                            insert(res.data.file_url)
                        }else{
                            this.$Alert({ message:res.msg,type:'error' })
                        }
                    })
            },
            // 获取内容
            getCon(){
                return this.editor.txt.html()
            },
            // 设置内容
            setCon(html){
                this.editor.txt.html(html)
            },
            // 追加内容
            appendCon(html){
                this.editor.txt.append(html)
            },
            // 清空内容
            clearCon(){
                this.editor.txt.clear()
            },
        },
    }
</script>

<style scoped>

</style>
